{extend name="template"}

{block name="body"}

<!-- 导航栏 -->
<div class="layui-row common-nav" style="width:100%;position:fixed;top:0;left:0;height:100px;z-index:90;">
    {include file="common/header" /}
</div>
<div id="search_form" style="display: none;z-index:1000;position:absolute;">
    {include file="common/search" /}
</div>

<!-- 轮播图 -->
<div class="layui-row list-carousel" style="position:fixed;top:100px;left:0;height:250px;z-index:80;">
    <img style="width:100%;height:100%;"  src="__ROOT__/static/index/img/subbanner_02.jpg">
</div>

<div class="gas-index layui-fluid" style="width:100%;padding:10px 0 0;background-color:#f7f6f4;position:relative;margin-top:360px;z-index:110;">

    <div class="edu-enroll layui-row margin-top-20">
        <div class="quick-menu">
            <div>
                <a href="/edu/enroll.html">
                    <img style="width:200px;height:60px;" src="__ROOT__/static/index/img/enroll2.png">
                </a>
            </div>
            <div>
                <a href="/edu/query.html">
                    <img style="width:200px;height:60px;" src="__ROOT__/static/index/img/result_query2.png">
                </a>
            </div>
        </div>
        <div class="info">

            <div class="header" style="height:30px;">
                <div class="pull-left name">马上报名</div>
                <div class="pull-right breadcrumb">
                    <a style="color: inherit;" href="/">首页</a>->教育培训->在线报名
                </div>
            </div>
            <div>

                <form class="layui-form" method="post" action="/edu/enrollresult.html">
                    <table width="100%">
                        <tr>
                            <td>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="name" maxlength="6" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="gender" value="男" title="男">
                                        <input type="radio" name="gender" value="女" title="女" checked>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">身份证号</label>
                                    <div class="layui-input-block">
                                        <input type="text" maxlength="18" name="idno" required  lay-verify="required" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">手机号</label>
                                    <div class="layui-input-block">
                                        <input type="text" maxlength="11" name="phone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">开课班级</label>
                                    <div class="layui-input-block">
                                        <select name="class_id" lay-filter="demo" lay-verify="required">
                                            <option value=""></option>
                                            {foreach $classes as $key=>$vo}
                                            <option value="{$vo.id}">{$vo.name}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">所在单位名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="company" maxlength="64" required  lay-verify="required" placeholder="请输入所在单位名称" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">岗位及工种</label>
                                    <div class="layui-input-block">
                                        <select name="work_position" class="layui-select">
                                            <option>--请选择岗位及工种--</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <table style="margin-left:60px;">
                                    <tr>
                                        <td rowspan="2">
                                            <img id="demo1" style="width:64px;height:64px;margin-right:20px;"
                                                 src="__ROOT__/static/theme/img/image.png" />
                                        </td>
                                        <td style="text-align: center;">
                                            <input ng-model="item.avatar" data-auto-none value="" type="hidden" name="avatar">
                                            <button id="test1" type="button" data-title="上传头像" data-file="btn" data-type="jpg,png,jpeg" data-field="avatar" class="layui-btn layui-btn-sm layui-btn-primary">上传头像</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: center;">
                                            <p class="color-desc">头像建议尺寸 128像素 * 128像素，1M以内</p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>

    {include file="common/footer" /}

</div>

{/block}

{block name='style'}
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<script>if (location.href.indexOf('#') > -1) location.replace(location.href.split('#')[0])</script>
<link rel="stylesheet" href="__ROOT__/static/index/index.css">
{/block}

{block name='script'}
<script src="__ROOT__/static/index/index.js"></script>
<script>

    let classesJson = JSON.parse('{$classesJson|raw}');

    function getClassPositions(class_id){
        for(let i=0; i<classesJson.length; i++) {
            if(classesJson[i].id == class_id)
                return classesJson[i]['sub'];
        }
    }

    layui.use(['layer', 'jquery', 'form'], function () {
        layui.form.on('select(demo)', function(data){
            let positions = getClassPositions(data.value);

            let html = '<option>--请选择工种--</option>';
            for(let i=0; i<positions.length; i++){
                html += '<optgroup label="'+positions[i].name+'">'+positions[i].name+'</optgroup>';

                for(let j=0; j<positions[i]['sub'].length; j++) {
                    html += '<option value="' + positions[i]['sub'][j]['id'] + '">' + positions[i]['sub'][j]['name'] + '</option>'
                }
            }
            $("select[name=work_position]").html(html);
            layui.form.render();
        });
        layui.form.on('radio(GenderRadio)', function(data){
            $("input[name=gender]").val(data.value);
        });
    });

    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            return true;
            /*layer.msg(JSON.stringify(data.field));
            return false;*/
        });
    });

    layui.use('upload', function() {
        var $ = layui.jquery
            , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/admin/api.upload/file.html' //改成您自己的上传接口
            ,size: 1024
            , done(res){
                $("input[name=avatar]").val(res.url);
                $('#demo1').attr('src', res.url); //图片链接（base64）
                layer.msg("上传成功");
            },error: function () {
                layer.msg("上传失败，请稍候再试");
            }
        });
    });
</script>
{/block}
